window.addEventListener("load", function () {
	// 功能1:海量API移入移出交互
	//思路:
	// 1.获取相关节点
	// $("#apiList li");
	//	2.给li绑定移入和移出事件
	let oldUrl = ""; //变量提升
	$("#apiList li").forEach(function (v) {
		//2-1移入事件
		v.addEventListener("mouseover", function () {
			// 2-1-背景色变蓝
			this.style.backgroundColor = "#0d60d0";
			//2-1-2字体变白色
			this.style.color = "#fff";
			//2-1-3 切换成透明的图片
			// 将图片的后缀名加一个-c, api01.svg 变为api01-c.svg
			let imgUrl = this.firstElementChild.src;
			// let src = imgUrl.slice(imgUrl.lastIndexOf(".")); //动态获取后缀名
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg"); //直接写死后缀名进行替换
			oldUrl = imgUrl; //用一个变量保存原先的图片路径
		});
		//3-1移出事件
		v.addEventListener("mouseout", function () {
			//3-1-1背景色变白
			this.style.backgroundColor = "#fff";
			//3-1-2字体变黑
			this.style.color = "#000";
			//3-1-3切换为原先的图片
			this.firstElementChild.src = oldUrl;
		});
	});

	//功能二:独角兽区轮播图
	//思路:将多个图文结构unicornCount全部叠在一个区域,每隔3s让其中1个显示,另外其他的不显示
	//1.获取节点
	const unicornConts = $(".unicornCont");
	console.log($(".unicornCont"));
	//默认第0个显示
	unicornConts[0].style.opacity = 1;
	let index = 1; //设置索引变量
	//2.设置周期定时器每隔3s显示
	this.window.setInterval(function () {
		//3.排他思想,不管当前谁显示,每一个周期都先让所有的消失
		unicornConts.forEach(function (v) {
			v.style.opacity = 0;
		});
		//4.通过索引显示对应内容,其他不显示
		unicornConts[index].style.opacity = 1;
		//6.当索引达到最大限度时,要回复初始状态
		if (index >= unicornConts.length - 1) {
			index = -1;
		}
		//5.设置索引变量,每隔一个周期就++,
		index++;
	}, 3000);

	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});

	//回到顶部到指定位置再出现
	window.addEventListener("scroll", function () {
		if (scrollY >= 300) {
			$("#blackTop").style.opacity = "1";
		} else {
			$("#blackTop").style.opacity = "0";
		}
	});

	//功能三：回到顶部
	$("#blackTop").addEventListener("click", function () {
		window.scroll({ left: 0, top: 0, behavior: "smooth" });
	});

	//如果你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();
});
